import { computed } from 'vue';
import AntVueTheme from 'ant-design-vue/es/theme';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { ThemeEnum } from '/@/enums/appEnum';
import AntDefTheme from './ant-com-theme';
import { cloneDeep } from 'lodash-es';
export function useDarkModeTheme() {
  const { getDarkMode } = useRootSetting();

  const { darkAlgorithm } = AntVueTheme;
  //通过ant官网调配主题 https://www.antdv.com/theme-editor-cn
  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
  const darkTheme = {
    ...AntDefTheme,
    algorithm: [darkAlgorithm],
  };

  const token = Object.assign({}, AntDefTheme.token, {
    colorLink: '#2b63a1',
    colorLinkHover: '#4b7cad',
    colorPrimary: '#2b63a1',
  });
  const lightComponents = Object.assign({}, cloneDeep(AntDefTheme.components), {
    Table: {
      colorFillAlter: '#F1F4F7',
      colorBorderSecondary: '#f5f6f7',
    },
  });
  const lightTheme = {
    token,
    components: lightComponents,
  };

  return {
    isDark,
    darkTheme,
    lightTheme,
  };
}
